<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form'
import { codeValidator, nameValidator } from '~/utils/form-validator.ts'
import type { ApiReq } from '~/api/setting/model/api.ts'
import { createApiApi, modifyApiApi } from '~/api/setting/api.ts'

const props = defineProps({
  apiData: Object,
  menuId: String,
  optType: {
    type: String,
    default: 'create',
  },
})

const emits = defineEmits(['onSaveSuccess'])

const message = useMessage()

const apiReq = ref<ApiReq>({
  apiTitle: undefined,
  apiCode: undefined,
  apiUrl: undefined,
  apiHttpMethod: undefined,
  apiParam: undefined,
  sort: undefined,
  note: undefined,
})

const apiCreateFormRef = ref()
const rules: Record<string, Rule[]> = {
  apiTitle: [
    { required: true, message: '请输入接口名称' },
    { validator: nameValidator, trigger: 'blur' },
  ],
  apiCode: [
    { required: true, message: '请输入接口编码' },
    { validator: codeValidator, trigger: 'blur' },
  ],
  apiUrl: [
    { required: true, message: '请输入接口地址' },
  ],
  apiHttpMethod: [
    { required: true, message: '请选择接口方式' },
  ],
  sort: [
    { required: true, message: '请输入排序' },
  ],
}

/**
 * 初始化接口
 */
async function init() {
  if (props.apiData) {
    apiReq.value = props.apiData
  }
}

const confirmLoading = shallowRef(false)

async function onSaveApi() {
  if (props.optType === 'create') {
    await onCreateApi()
  } else {
    await onEditApi()
  }
}

/**
 *  添加接口
 */
async function onCreateApi() {
  apiCreateFormRef.value
    .validate()
    .then(() => {
      confirmLoading.value = true
      apiReq.value.menuId = props?.menuId
      createApiApi(apiReq.value).then((response) => {
        if (response) {
          message.success('新建成功')
          emits('onSaveSuccess', 'create')
        }
      }).finally(() => {
        confirmLoading.value = false
        close()
      })
    })
    .catch((error) => {
      console.log('apiCreateFormRef::error', error)
    })
}

/**
 *  编辑接口
 */
async function onEditApi() {
  apiCreateFormRef.value
    .validate()
    .then(() => {
      confirmLoading.value = true
      modifyApiApi(apiReq.value).then((response) => {
        if (response) {
          message.success('修改成功')
          emits('onSaveSuccess', 'edit')
        }
      }).finally(() => {
        confirmLoading.value = false
        close()
      })
    })
    .catch((error) => {
      console.log('apiCreateFormRef::error', error)
    })
}

onMounted(() => {
  init()
})
</script>

<template>
  <a-modal title="编辑接口" width="600px" :confirm-loading="confirmLoading" @ok="onSaveApi">
    <a-space direction="vertical" size="large" class="w-full">
      <a-form
        ref="apiCreateFormRef"
        :model="apiReq"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
        layout="horizontal"
      >
        <a-form-item name="apiTitle" label="接口名称">
          <a-input v-model:value="apiReq.apiTitle" placeholder="请输入接口名称" allow-clear />
        </a-form-item>
        <a-form-item name="apiCode" label="接口编码">
          <a-input v-model:value="apiReq.apiCode" placeholder="请输入接口编码" allow-clear />
        </a-form-item>
        <a-form-item name="apiUrl" label="接口地址">
          <a-input v-model:value="apiReq.apiUrl" placeholder="请输入接口地址" allow-clear />
        </a-form-item>
        <a-form-item name="apiCode" label="接口方式">
          <a-select
            v-model:value="apiReq.apiHttpMethod"
            placeholder="请选择接口方式"
            show-search
            allow-clear
          >
            <a-select-option value="GET">
              GET
            </a-select-option>
            <a-select-option value="POST">
              POST
            </a-select-option>
            <a-select-option value="PUT">
              PUT
            </a-select-option>
            <a-select-option value="DELETE">
              DELETE
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="apiParam" label="接口参数">
          <a-input v-model:value="apiReq.apiParam" placeholder="请输入接口参数" allow-clear />
        </a-form-item>
        <a-form-item name="sort" label="排序">
          <a-input-number v-model:value="apiReq.sort" placeholder="排序" allow-clear />
        </a-form-item>
        <a-form-item name="note" label="备注">
          <a-textarea
            v-model:value="apiReq.note"
            :rows="4"
            placeholder="请输入备注"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </a-space>
  </a-modal>
</template>

<style lang="less" scoped>
.avatar-uploader {
  .ant-upload {
    width: 128px;
    height: 128px;
  }
}

.avatar-uploader-img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
